import { memo, useEffect, useState } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import {
  Card,
  Breadcrumb,
  Form,
  Button,
  Radio,
  DatePicker,
  Select,
  Table,
  Tag,
  Space,
  Popconfirm
} from 'antd'
import locale from 'antd/es/date-picker/locale/zh_CN'
import { EditOutlined, DeleteOutlined } from '@ant-design/icons'
import img404 from '@/assets/error.png'
import {
  api_getChannels,
  api_getAticleList,
  api_delAticleById
} from '@/api/article'

const { RangePicker } = DatePicker

const Article = memo(() => {
  const navagite = useNavigate()

  // 准备列数据
  const columns = [
    {
      title: '封面',
      dataIndex: 'cover',
      width: 120,
      render: cover => {
        return (
          <img src={cover.images[0] || img404} width={80} height={60} alt="" />
        )
      }
    },
    {
      title: '标题',
      dataIndex: 'title',
      width: 220
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: () => <Tag color="green">审核通过</Tag>
    },
    {
      title: '发布时间',
      dataIndex: 'pubdate'
    },
    {
      title: '阅读数',
      dataIndex: 'read_count'
    },
    {
      title: '评论数',
      dataIndex: 'comment_count'
    },
    {
      title: '点赞数',
      dataIndex: 'like_count'
    },
    {
      title: '操作',
      render: data => {
        return (
          <Space size="middle">
            <Button
              type="primary"
              shape="circle"
              icon={<EditOutlined />}
              onClick={() => navagite(`/publish?id=${data.id}`)}
            />
            <Popconfirm
              title="确认删除该条文章吗?"
              onConfirm={() => delArticle(data)}
              okText="确认"
              cancelText="取消"
            >
              <Button
                type="primary"
                danger
                shape="circle"
                icon={<DeleteOutlined />}
              />
            </Popconfirm>
          </Space>
        )
      }
    }
  ]

  const [channels, setChannels] = useState([])

  useEffect(() => {
    const getChannels = async () => {
      const res = await api_getChannels()
      const channels = res.data.channels.map(item => ({
        label: item.name,
        value: item.id
      }))
      setChannels(channels)
    }
    getChannels()
  }, [])

  const [article, setArticleList] = useState({
    list: [],
    count: 0
  })
  const [params, setParams] = useState({
    page: 1,
    per_page: 10,
    begin_pubdate: null,
    end_pubdate: null,
    status: null,
    channel_id: null
  })

  const [showLoading, setShowLoading] = useState(false)
  const getArticleList = async params => {
    setShowLoading(true)
    const res = await api_getAticleList(params)
    setShowLoading(false)
    const { results, total_count } = res.data
    setArticleList({
      list: results,
      count: total_count
    })
  }

  useEffect(() => {
    getArticleList(params)
  }, [params])

  const onFinish = async formValue => {
    const { channel_id, date, status } = formValue

    let begin_pubdate = null
    let end_pubdate = null

    if (date) {
      begin_pubdate = date[0].format('YYYY-MM-DD')
      end_pubdate = date[1].format('YYYY-MM-DD')
    }
    const reqData = {
      status,
      channel_id,
      begin_pubdate,
      end_pubdate
    }
    getArticleList(reqData)
  }

  const pageChange = page => {
    setParams({
      ...params,
      page
    })
  }

  const delArticle = async data => {
    await api_delAticleById(data.id)
    setParams({
      page: 1,
      per_page: 10
    })
  }

  return (
    <Card
      title={
        <Breadcrumb
          items={[{ title: <Link to={'/'}>首页</Link> }, { title: '文章列表' }]}
        />
      }
      style={{ marginBottom: 20 }}
    >
      <Form
        onFinish={onFinish}
        initialValues={{
          status: ''
          // channel_id: '推荐'
        }}
      >
        <Form.Item label="状态" name="status">
          <Radio.Group>
            <Radio value={''}>全部</Radio>
            <Radio value={0}>草稿</Radio>
            <Radio value={2}>审核通过</Radio>
          </Radio.Group>
        </Form.Item>

        <Form.Item label="频道" name="channel_id">
          <Select
            placeholder="请选择文章频道"
            options={channels}
            style={{ width: 120 }}
          ></Select>
        </Form.Item>

        <Form.Item label="日期" name="date">
          {/* 传入locale属性 控制中文显示*/}
          <RangePicker locale={locale}></RangePicker>
        </Form.Item>

        <Form.Item>
          <Button type="primary" htmlType="submit" style={{ marginLeft: 40 }}>
            筛选
          </Button>
        </Form.Item>
      </Form>
      <Card title={`根据筛选条件共查询到 ${article.count} 条结果：`}>
        <Table
          loading={showLoading}
          rowKey="id"
          columns={columns}
          dataSource={article.list}
          pagination={{
            current: params.page,
            pageSize: params.per_page,
            onChange: pageChange,
            total: article.count,
            position: ['bottomCenter']
          }}
        />
      </Card>
    </Card>
  )
})

Article.displayName = 'Article'
export default Article
